<template>
  <div class="page-box">
    <el-button plain type="primary" icon="el-icon-plus" style="marginBottom:20px">新增</el-button>
    <div class="table-box">
      <el-table
        :data="menuList"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="title" label="菜单名称" width="180" />
        <el-table-column prop="path" label="菜单地址" width="180" />
        <el-table-column prop="mark" label="权限标识" />
        <el-table-column prop="icon" label="图标" width="80" align="center">
          <template #default="{row}">
            <svg-icon :icon-class="row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="component" label="组件路径" />
        <el-table-column prop="type" label="类型" align="center">
          <template #default="{row}">
            <el-tag v-if="row.type===1">菜单</el-tag>
            <el-tag v-else type="warning">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_show" label="是否显示">
          <template #default="{row}">
            <!-- switch只是做渲染数据无需更改时一个value足矣 -->
            <el-switch
              :value="!!row.is_show"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default>
            <el-button type="primary" circle icon="el-icon-edit" />
            <el-button type="warning" circle icon="el-icon-plus" />
            <el-button type="danger" circle icon="el-icon-delete" />
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
import { getMenus } from '@/api/system/menu'
export default {
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.menuList = await getMenus()
    }
  }
}
</script>
<style>
</style>
